<template>
  <div class="container-fluid px-lg-5 px-3">
    <nav class="py-2 d-lg-flex">
      <div id="logo">
        <h1>
          <a class="navbar-brand logo" href="index.html">{{name}}</a>
        </h1>
      </div>
      <label for="drop" class="toggle">Menu</label>
      <input type="checkbox" id="drop" />
      <ul class="menu ml-auto">
        <li :class="tabName == 'recuitIndex'&&'active'">
          <a href="javascript:void(0)" @click="toWhere('recuitIndex')">首页</a>
        </li>
        <li :class="tabName == 'positionMain'&&'active'">
          <a href="javascript:void(0)" @click="toWhere('positionMain')">职位</a>
        </li>
        <li :class="tabName == 'companyMain'&&'active'">
          <a href="javascript:void(0)" @click="toWhere('companyMain')">企业</a>
        </li>
        <li>
          <a href="javascript:void(0)" @click="toWhere('resumePool')">我要招人</a>
        </li>
        <li>
          <label for="drop-2" class="toggle">
            Dropdown
            <span class="fa fa-angle-down" aria-hidden="true"></span>
          </label>
          <a href="#">
            个人中心
            <span class="fa fa-angle-down" aria-hidden="true"></span>
          </a>
          <input type="checkbox" id="drop-2" />
          <ul class="inner-ul">
            <!-- <li :class="tabName == 'resumeState' && 'active'"><a href="javascript:void(0)" @click="toWhere('resumeState')">简历状态</a></li> -->
            <li :class="tabName == 'collection' && 'active'">
              <a href="javascript:void(0)" @click="toWhere('collection')">收藏职位</a>
            </li>
            <li :class="tabName == 'application' && 'active'">
              <a href="javascript:void(0)" @click="toWhere('application')">投递记录</a>
            </li>
            <li v-if="user">
              <a href="javascript:void(0)" @click="toWhere('loginIndex')">退出登录</a>
            </li>
          </ul>
        </li>
        <a v-if="user" style="margin-left:20px;">
          <a href="javascript:void(0)">
            <span style="color:#019875">{{user.nick_name}}</span> 你好!
          </a>
        </a>
        <li v-else :class="tabName == 'loginIndex'&&'active'">
          <a href="javascript:void(0)" @click="toWhere('loginIndex')">快速登陆</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";

export default {
  name: "header",
  data() {
    return {
      name: localStorage.getItem("name"),
      user: JSON.parse(localStorage.getItem("user"))
    };
  },
  computed: {
    ...mapState({
      tabName: state => state.tabName
    })
  },
  watch: {
    $route(to, from) {
      this.$router.go(0);
    }
  },
  components: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroy() {},
  methods: {
    toWhere(name) {
      switch (name) {
        case "resumePool":
          if (!localStorage.getItem("user")) {
            this.$router.push({ name: "loginIndex" });
          } else if (!localStorage.getItem("company")) {
            this.$router.push({ name: "createCompany" });
          } else {
            this.$router.push({ name });
          }
          
          return
          break;
        case "loginIndex":
          localStorage.removeItem("user");
          this.user = "";
          this.$router.push({ name });
          return
          break;
        default:
          break;
      }
      this.$store.dispatch("changeTabName", name);
      this.$router.push({ name });
    }
  }
};
</script>

<style scoped lang="less">
@import "./../../public/less/header_footer.less";
</style>
